<template>
	<view class="" >
		<view @click="$emit('update:flag',true)" class="mask" :class="{flag: flag}"  @catchtouchmove="moveHandle" @touchmove.stop.prevent="moveHandle"></view>
		<view  @click="$emit('update:flag',true)" class="box" :class="{flag: flag}">
			<view class="manyImage" :style="`width:${imageSrcs.length}00%`">
				<view class="item" v-for="(item,index) in imageSrcs" :key="index">
					<image :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>、
	</view>
</template>

<script setup>
	import { defineProps } from 'vue'
	let props = defineProps({
		imageSrcs: {
			default: [],
			type: Array
		},
		flag: {
			default: true,
			type: Boolean
		}
	})
	function moveHandle(){
		return
	}
</script>

<style lang="scss" scoped>
	.mask{
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 1s ease;
		z-index: 30;
		&.flag{
			opacity: 0;
			z-index: -1;
			transition: 0.16s ease;
		}
	}
	.box{
		position: fixed;
		height: fit-content;
		z-index: 99999;
		top: 50%;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateY(-50%);
		box-sizing: border-box;
		transition: 1s ease;
		width: 100%;
		overflow: auto;
		.item{
			width: 100%;
			image{
				width: 100%;
				vertical-align: middle;
			}
		}
		.manyImage{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
		}
		&.flag{
			opacity: 0;
			z-index: -1;
			transition: 0.16s ease;
		}
	}
</style>